<!doctype html>
<html class="no-js">

<head>
    <title>在线咨询</title>
    <#include "/fd/components/meta.html" />
    <#include "/fd/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/fd/stylesheets/chat.css">
</head>

<body>
    <div id="app">
        <#--<#if isMaster=0>
            用户
        </#if>
        <#if isMaster=1>
            大师
        </#if>-->
        <#list list.list as item>
            <template>
                <#if user.code == item.fromUser>
                    <div class="am-g am-g-collapse container">
                        <div class="am-u-sm-offset-2 am-u-sm-8 content">
                            <div class="time">${item.addTime!}</div>
                            <div class="message">${item.content!}</div>
                        </div>
                        <div class="am-u-sm-2 logo">
                            <img src="${user.logo}" class="am-img-responsive" />
                        </div>
                    </div>
                <#else>
                    <div class="am-g am-g-collapse container">
                        <div class="am-u-sm-2 logo">
                            <a href="/fd">
                                <img src="${toUser.logo}" class="am-img-responsive" />
                            </a>
                        </div>
                        <div class="am-u-sm-8 content">
                            <div class="time">${item.addTime!}</div>
                            <div class="message">${item.content!}</div>
                        </div>
                        <div class="am-u-sm-2"></div>
                    </div>
                </#if>
                <hr/>
            </template>
        </#list>
        <template v-for='(item,index) in msg'>
            <div class="am-g am-g-collapse container" v-if='user == item.fromUser'>
                <div class="am-u-sm-offset-2 am-u-sm-8 content">
                    <div class="time">{{ item.addTime }}</div>
                    <div class="message">{{ item.content }}</div>
                </div>
                <div class="am-u-sm-2 logo">
                    <img src="${user.logo!}" class="am-img-responsive" />
                </div>
            </div>
            <div class="am-g am-g-collapse container" v-else>
                <div class="am-u-sm-2 logo">
                    <a href="/fd">
                        <img src="${toUser.logo!}" class="am-img-responsive" />
                    </a>
                </div>
                <div class="am-u-sm-8 content">
                    <div class="time">{{ item.addTime }}</div>
                    <div class="message">{{ item.content }}</div>
                </div>
                <div class="am-u-sm-2"></div>
            </div>
            <hr/>
        </template>
        <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default bottom" id="">
            <div class="am-g">
                <div class="am-u-sm-9 inputFrame">
                    <input type="text" placeholder="请输入" v-model="message" />
                </div>
                <div class="am-u-sm-3 submit">
                    <button class="am-btn am-btn-default am-btn-sm" @click='send'>发送</button>
                </div>
            </div>
        </div>
    </div>
    <#include "/fd/components/scripts.html" />
    <#include "/fd/components/http.html" />
    <script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
    <script type="text/javascript">
    var ws = new ReconnectingWebSocket("${wsHost!''}");

    var app = new Vue({
        el: '#app',
        data: {
            code: "${code}",
            user: '${user.code!""}',
            message: '',
            msg: []
        },
        mounted: function() {
            this.initWS()
        },
        methods: {
            send: function() {
                var param = {
                    content: this.message,
                    code: this.code
                }
                this.message = "";

                var success = function(data) {
                    console.log(data)
                    return;
                }
                var fail = function() {}
                request('/fd/chat/send', param, success, fail)

            },
            initWS: function() {
                var _self = this
                ws.onopen = function() {
                    var json = {
                        code: '${code}',
                        user: '${user.code!""}'
                    }
                    ws.send(JSON.stringify(json));
                }
                ws.onclose = function() {
                    console.log('dis')
                }
                ws.onmessage = function(data) {
                    // console.log("okok");
                    // console.log(data);
                    var json = JSON.parse(data.data);
                    if (_self.code != json.conversation) {
                        return;
                    }
                    _self.msg.push(json);
                    console.log(_self.msg);
                }
            }
        }
    })
    </script>
</body>

</html>